<template>
	<view class="picLunbo" :style="{
			marginTop: styles.marginTop + 'px',
			marginBottom: styles.marginBottom + 'px',
			marginLeft: styles.marginLeft + 'px',
			marginRight: styles.marginRight + 'px',
		}">
		<swiper :style="{borderRadius:styles.circle}" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="(item, index) in styles.imgUrl"><image style="width: 100%;height: 350upx;" :src="item.img" mode=""></image></swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		name: 'picLunbo',
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			};
		},
	
		props: ['styles'],
		mounted() { 
			console.log(this.styles, 77);
		},
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots;
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay;
			},
			intervalChange(e) {
				this.interval = e.target.value;
			},
			durationChange(e) {
				this.duration = e.target.value;
			}
		},
		
	};
</script>
<style lang="scss" scoped>
	.swiper {
		height: 350upx;
		width: 100%;
	}
</style>